<template>
  <body-index>
    <body-left title="文章" slot="bodyLeft">
      <template slot="main">
        <div class="container-fluid">
          <div class="row">
            <div class="col-12">
              <h3 style="margin-top: 20px">{{ info.title }}</h3>
            </div>

            <div
              class="col-12"
              style="height: 40px; line-height: 40px; position: relative"
            >
              <el-avatar
                style="position: relative; top: 15%; cursor: pointer"
                :size="25"
                :src="writer.avatar"
              ></el-avatar>
              <font id="writer" @click="visitUser(writer.id)">
                {{ writer.nick }}
              </font>
              <span> · </span>
              <span> {{ info.views }} 阅读 </span>
              <span> · </span>
              <span> {{ info.comments }} 评论 </span>
              <span> · </span>
              <span> {{ info.time }} 发布</span>
            </div>

            <div class="col-12">
              <font id="content"></font>
              <p v-html="info.content">{{ info.content }}</p>
            </div>

            <div class="col-12">
              <span id="tags">讨论话题：</span>
              <el-tag
                v-for="(tag, index) in info.tags"
                :key="index"
                size="small"
                :type="tag.type"
                >{{ tag.content }}</el-tag
              >
            </div>

            <div class="col-12">
              <div class="d-flex justify-content-end" style="padding: 25px 0">
                <div class="btn-list">
                  <span
                    @click="touch('点赞')"
                    class="icon"
                    :id="likeStatus ? 'heartBeat' : ''"
                    ><i class="iconfont icon-dianzan"></i>
                    点赞
                  </span>

                  <span
                    @click="touch('收藏')"
                    class="icon"
                    :id="collectionStatus ? 'activeCollection' : ''"
                    ><i class="el-icon-star-off"></i>
                    收藏
                  </span>

                  <span class="icon" @click="touch('分享')"
                    ><i class="el-icon-share"></i> 分享
                  </span>

                  <span class="icon" @click="touch('举报')"
                    ><i class="el-icon-warning-outline"></i> 举报
                  </span>

                  <span
                    class="icon"
                    @click="deleteArticle(info.id)"
                    style="color: red"
                    v-if="isSelf || isAdmin"
                    ><i class="el-icon-delete"></i> 删除</span
                  >
                </div>
              </div>
            </div>

            <div class="col-12">
              <div class="discuss">
                <span>全部评论</span>
                <span style="float: right">按时间</span>
                <span style="float: right">按热度&nbsp;&nbsp;&nbsp;&nbsp;</span>
              </div>
            </div>

            <div class="col-12" style="margin-top: 20px">
              <div
                style="height: 1px; width: 70px; background-color: #41b883"
              ></div>
              <div
                style="
                  display: absolute;
                  height: 1px;
                  width: 100%;
                  background-color: #e8e8e8;
                "
              ></div>
            </div>

            <div class="col-12">
              <discuss
                :articleId="info.id"
                :writerId="info.writerId"
                :comments="info.comments"
                :commentsList="comments"
              ></discuss>
            </div>
          </div>
        </div>
      </template>
    </body-left>

    <body-right slot="bodyRight">
      <template slot="first">
        <div class="container-fluid">
          <div class="row">
            <div
              class="col-12 border-bottom"
              style="height: 50px; line-height: 50px"
            >
              <span>最新文章</span>
            </div>

            <div
              class="col-12 body-right"
              v-for="(item, index) in list"
              :key="item.id"
            >
              <router-link
                v-if="index <= 4"
                :to="{
                  name: 'Article',
                  query: {
                    articleId: item.id + '',
                  },
                }"
              >
                <div class="body-right inline-block">
                  <span id="body-right-span" style="float: left">{{
                    item.title
                  }}</span>
                  <span id="body-right-span" style="float: right"
                    ><i class="el-icon-view"></i>{{ item.views }}</span
                  >
                </div>
              </router-link>
            </div>
          </div>
        </div>
      </template>

      <template slot="second">
        <div class="container-fluid">
          <div class="row">
            <div
              class="col-12 border-bottom"
              style="height: 50px; line-height: 50px"
            >
              <span>推荐关注</span>
            </div>

            <div
              class="col-12 body-right"
              v-for="(item, index) in account"
              :key="item.user.info.id"
            >
              <router-link
                v-if="index <= 4"
                :to="{
                  name: 'UserInfo',
                  query: {
                    id: item.user.info.id + '',
                    type:'1',
                  },
                }"
              >
                <div class="body-right">
                  <div style="display: inline-block">
                    <el-avatar
                      :size="25"
                      :src="item.user.info.avatar"
                    ></el-avatar>
                  </div>
                  <span
                    style="position: relative; bottom: 5px"
                    id="body-right-span"
                  >
                    {{ item.user.info.nick }}</span
                  >
                </div>
              </router-link>
            </div>
          </div>
        </div>
      </template>
    </body-right>
  </body-index>
</template>

<script>
import Discuss from "./Discuss.vue";
import BodyIndex from "../../pages/body/BodyIndex.vue";
import BodyLeft from "../../pages/body/BodyLeft.vue";
import BodyRight from "../../pages/body/BodyRight.vue";
import { fake } from "../../assets/fake";
export default {
  data() {
    return {
      info: "",
      comments: "",
      writer: "",
      list: "",
      account: "",
      isAdmin: false,
      isSelf: false,
      likeStatus: false,
      collectionStatus: false,
      articleId: "",
    };
  },
  watch: {
    $route() {
      this.flushPage();
    },
  },
  methods: {
    visitUser(id) {
      this.$router.push({
        name: "User",
        query: {
          id: id,
        },
      });
    },
    touch(type) {
      if (fake.self !== null) {
        if (type === "点赞") {
          this.likeStatus = !this.likeStatus;
          fake.methods.operate(this.articleId, fake.self.info.id, type);
        } else if (type === "收藏") {
          this.collectionStatus = !this.collectionStatus;
          fake.methods.operate(this.articleId, fake.self.info.id, type);
        } else if (type === "分享") {
          this.$alert("链接已复制，快去分享给朋友吧", "提示", {
            confirmButtonText: "确定",
            type: "success",
          });
        } else if (type === "举报") {
          this.$alert("已举报", "提示", {
            confirmButtonText: "确定",
            type: "success",
          });
        } else {
          console.error("无法解析 " + type);
        }
      } else {
        this.$alert("登录后才能" + type + "哦", "提示", {
          confirmButtonText: "确定",
          type: "warning",
        });
      }
    },
    deleteArticle(id) {
      let _this = this;
      this.$confirm("删除后不可恢复，是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          fake.methods.deleteArticle(id);
          _this.$notify({
            title: "提示",
            message: "成功删除该文章",
            type: "success",
          });
          this.$router.back({
            name: "Recommend",
          });
        })
        .catch(() => {
          _this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    flushPage() {
      this.list = fake.article.list;
      this.account = fake.account;
      let param = this.$route.query;
      this.articleId = param.articleId;
      this.info = fake.methods.getArticleById(param.articleId);
      this.comments = fake.methods.getComments(param.articleId);
      this.writer = fake.methods.getUserInfo(this.info.writerId);
      this.isAdmin = fake.self !== null && fake.self.isAdmin;
      this.likeStatus =
        fake.self !== null &&
        fake.methods.getOperateStatus(
          param.articleId,
          fake.self.info.id,
          "点赞"
        );
      this.collectionStatus =
        fake.self !== null &&
        fake.methods.getOperateStatus(
          param.articleId,
          fake.self.info.id,
          "收藏"
        );
      this.isSelf =
        fake.self !== null && this.info.writerId === fake.self.info.id;
    },
  },
  components: {
    BodyLeft,
    BodyIndex,
    BodyRight,
    Discuss,
  },
  mounted() {
    this.list = fake.article.list;
    this.account = fake.account;
  },
  beforeMount() {
    let param = this.$route.query;
    this.articleId = param.articleId;
    this.info = fake.methods.getArticleById(param.articleId);
    this.comments = fake.methods.getComments(param.articleId);
    this.writer = fake.methods.getUserInfo(this.info.writerId);
    this.isAdmin = fake.self !== null && fake.self.isAdmin;
    this.likeStatus =
      fake.self !== null &&
      fake.methods.getOperateStatus(param.articleId, fake.self.info.id, "点赞");
    this.collectionStatus =
      fake.self !== null &&
      fake.methods.getOperateStatus(param.articleId, fake.self.info.id, "收藏");
    this.isSelf =
      fake.self !== null && this.info.writerId === fake.self.info.id;
  },
};
</script>

<style scoped>
span {
  font-size: 12px;
  color: #9b9b9b;
}
#tags {
  font-size: 16px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.659);
}
p {
  padding: 8px 0;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.659);
}
.icon {
  font-size: 16px;
  color: #41b883;
  transition: all 0.5s;
}
.icon:hover {
  color: rgba(46, 215, 139, 0.753);
  cursor: pointer;
  transition: all 0.5s;
}
.discuss span {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.659);
}
#writer {
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s;
}
#writer:hover {
  color: #41b883;
  transition: all 0.3s;
}
a {
  color: rgba(0, 0, 0, 0.658);
  transition: all 0.3s;
}
a:hover {
  color: rgb(0, 0, 0);
  transition: all 0.3s;
}
#body-right-span {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.658);
  padding: 15px auto;
}
.body-right {
  margin-top: 5px;
}
#activeCollection {
  color: gold;
  font-weight: bold;
  display: inline-block;
  margin: 0 0.5rem;
  animation: heartBeat;
  animation-duration: 1s;
}
#heartBeat {
  color: red;
  font-weight: bold;
  display: inline-block;
  margin: 0 0.5rem;
  animation: heartBeat;
  animation-duration: 1s;
}
</style>